<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{/bootstrap/js/jquery-3.5.1.min.js}"></script>
    <script>
        function byId() {
            console.log("OK")
            $.ajax({
                url:"/findById",
                data:{
                    "id":$("#input").val()
                },
                success: function (data) {
                    console.log(data);
                    $("#id").text(data.id);
                    $("#name").text(data.name);
                    $("#sex").text(data.sex);
                    $("#age").text(data.age);
                    $("#email").text(data.email);
                    if (data==null||data==""){
                        $("#msg").text("没有该用户")
                    }else {
                    $("#msg").text("")
                    }
                }
            })
            console.log("input")
            $("#input").val("");
        }
    </script>
</head>
<body style="position: absolute;top: 10%;width: 80%;left: 10%">
<div style="float: right">
    &nbsp;<a th:href="@{/toUserInfo}" th:text="${session.loginInfo.email}"></a>
    <span>&nbsp;|&nbsp;</span>
    <a href="logout">注销</a>
</div>
<HR align=center width=100% color=" #66afe9"  SIZE=1>

<div style="position: absolute;left: 500px">
  通过ID搜索用户:  <input th:id="input" onblur="byId()"/> <br/>
    <label id="msg"  style="font-size: 25px;font-style: inherit;color: red"></label>

    <table border="1">
        <thead>
        <tr>
            <th>编号 |</th>&nbsp;<td id="id">&nbsp;</td>
        </tr>
        <tr>
            <th>姓名 |</th>&nbsp;<td id="name">&nbsp;</td>
        </tr>
        <tr>
            <th>性别 |</th>&nbsp;<td id="sex">&nbsp;</td>
        </tr>
        <tr>
            <th>年龄 |</th>&nbsp;<td id="age">&nbsp;</td>
        </tr>
        <tr>
            <th>邮箱 |</th>&nbsp;<td id="email">&nbsp;</td>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <table class="table" th:border="3" th:width="500px">
                <title>人员列表</title>
                <thead>
                <tr>
                    <th>编&nbsp;号</th>
                    <th>姓&nbsp;名</th>
                    <th>性&nbsp;别</th>
                    <th>年&nbsp;龄</th>
                    <th>邮&nbsp;箱</th>
                    <th>操&nbsp;作</th>
                </tr>
                </thead>
                <tbody>
                <tr  th:each="user : ${users}">
                    <td th:text="${user.getId()}"></td>
                    <td th:text="${user.getName()}"></td>
                    <td th:text="${user.getSex()}"></td>
                    <td th:text="${user.getAge()}"></td>
                    <td th:text="${user.getEmail()}"></td>
                    <td><a th:href="@{/toUpdateUser/}+${user.getId()}">编辑</a>&nbsp;|&nbsp;
                    <td><a th:href="@{/deleteUser/}+${user.getId()}">删除</a>
                </tr>
                </tbody>
            </table>
            <a th:href="@{/toAddUser}"><button>添加用户</button></a>
        </div>
    </div>
</div>
</body>
</html>